<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	var mySheet, myChart;
	
	$(document).ready(function() {
		createSheet();		
		createChart();
	});
	
	function createSheet() {
		var cfg = {SearchMode:2,Page:100};  
		mySheet.SetConfig(cfg);

		var headers  = [{Text:"NO|코드|펀드 명|3M|6M|9M|12M|18M|24M|30M|36M|60M",Align:"Center"}];
		var info = {Sort:1, ColMove:1, ColResize:1, HeaderCheck:0};
		mySheet.InitHeaders(headers,info);

		var cols = [	{Type:"Seq",  Width:30,Align:"Center",Hidden:1}, 
						{Type:"Text", Width:90, Align:"Center",Hidden:1},
						{Type:"Text", Width:180,Align:"Left"},  
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"}, 
						{Type:"Float",Width:48, Align:"Right"} ];
		
		mySheet.InitColumns(cols);
		mySheet.SetSelectionMode(3);
	    mySheet.DoSearch("../data/sheetData1.xml");
	}
	
	function createChart() {
		var cfg = {
			Chart:{
				Type:"column",
				PlotBackgroundColor : "#F7FAFB",
				PlotBorderColor:"#A9AEB1",
				PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#FFFFFF"],
						[1, "#D3D9E5"]
					]
				},
				BorderColor:"#84888B"
			},
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			Title:{
				Text:"IBSheet와 연동",
				Style:{
					Color:"#15498B",
					FontFamily:"Dotum",
					FontWeight:"bold"
				}
			},
			Legend:{
				Enabled:false
			},
			ToolTip:{
				Enabled:true,
				Shadow:true,
				Formatter:function(){
					return '<span style="color: #4572A7;background-color:#FDFDFD">' +  this.series.name + '</span><br/>' +this.point.name + ' : ' + this.y ;
				},
				Style:{
					Color:"#000000",
					FontSize:"12px",
					FontWeight:"bold"
				}
			}
		}
	
		myChart.SetOptions(cfg);
		myChart.Draw();
	}
	
	function mySheet_OnSearchEnd(Code, Msg, StCode, StMsg) {
		mySheet.FitColWidth();
	}
	
	function mySheet_OnSelectCell(or,oc,nr,nc) {
		
		var seriestypeArr = [],
			seriestypeStr = $("#chartType option:selected").val();
		
		var hiddenCnt = 0;
		
		// 숨겨진 컬럼만큼 뺀다.
		for (var i = 0; i < mySheet.LastCol() ; i++) {
			if (mySheet.GetColHidden(i) == 1) {
				hiddenCnt++;
			}
		}
		
		var length = mySheet.LastCol() - hiddenCnt;
		
		for (var i = 0; i < length ; i++) {
			seriestypeArr.push(seriestypeStr);
		}
		
		try {
			myChart.SetMargin(2, 5, 50, 5);
			var pparam = {
				datadirection:"horizontal",
				datarowcol:nr+"",
				legendseriesname:mySheet.GetCellValue(nr,2),
				legendtitle:"",
				startdatarowcol:3,
				enddatarowcol:11,
				labelrowcol:0,
				startlabelrowcol:3,
				endlabelrowcol:11,
				labeldirection:"horizontal",
				seriestype:seriestypeArr
			};
			sheet2chart(mySheet, myChart, pparam);
		} catch(e) {
			alert(e.message);	
		}
	}
</script>
<title>시트와 차트 연동 예제(1)</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">시트와 차트 연동 예제(1)</div>
	<div id="desc">
		시트의 여러개의 셀을 선택해서 차트에 보여주는 예제 
	</div>

	<div id="functionArea">
		차트 표현
		<select class="input_all" id="chartType" title="막대 선택">
			<option value="bar" >바</option>
			<option value="column" selected>막대</option>
			<option value="area" >영역</option>
			<option value="areaspline" >부드러운 영역</option>
			<option value="line" >꺽은선</option>
			<option value="spline" >부드러운 꺽은선</option>
			<option value="scatter" >산점</option>
		</select>
	</div>
	
	<div id="viewArea">
		<table border="0" width="100%">
			<tr>
				<td width="50%">
					<script type="text/javascript">
						createIBSheet("mySheet", "100%", "300px");
					</script>
				</td>
				<td width="50%">
					<script type="text/javascript">
						createIBChart("myChart", "100%", "300px");
					</script>
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>